<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Web Service Test</title>
    <style type="text/css">
        input[type=text]
        {
            height: 25px;
        }
        input[type=text], textarea
        {
            font-size: 20px;
            padding: 3px 5px;
            border: 1px solid #0088ff;
        }
        input[type=submit], input[type=button], button
        {
            background-color: #dcdcdc;
            font-size: 1em;
            border-style: solid;
            border-width: 1px;
            border-color: #cccccc #666666 #666666 #cccccc;
        }
        div
        {
            padding: 10px;
        }
        .pre, pre
        {
            background-color: #e5e5cc;
            padding: 5px;
            font-family: Courier New;
            font-size: small;
            border: 1px #f0f0e0 solid;
        }
        legend
        {
            cursor: pointer;
            margin-left: 10px;
        }
    </style>

    <script type="text/javascript" src="json2.js"></script>

    <script type="text/javascript" src="jquery-1.4.2.js"></script>

    <script type="text/javascript" src="jquery.cookie.js"></script>

    <script type="text/javascript" src="WSTestBase.js"></script>

    <script type="text/javascript">
        window.page = {};
        page.oCaller = {};
        page.prevCaller = {};
        page.parseData = function() {
            var tbURL = $("#tbURL").get(0), tbPara = $("#tbPara").get(0);
            var data = {
                url: {
                    element: tbURL,
                    value: $.trim(tbURL.value),
                    isValid: false,
                    errMsg: "",
                    init: function() {
                        this.errMsg = "Invalid url: \r\n" + this.value;
                        //url must start with HTTP.
                        if (this.value.length <= 4 || this.value.substr(0, 4).toUpperCase() !== "HTTP")
                            return;

                        //http://localhost:4807/WSPage.asmx?op=MethodName
                        var index1 = this.value.toUpperCase().lastIndexOf("?OP=");
                        if (index1 > 0 && index1 + 4 < this.value.length) {
                            this.value = this.value.substr(0, index1) + "/" + this.value.substr(index1 + 4);
                            this.isValid = true;
                        }

                        //http://localhost:4807/WSPage.asmx/MethodName
                        var index2 = this.value.toUpperCase().lastIndexOf(".ASMX/")
                        if (index2 > 0 && index2 + 6 < this.value.length)
                            this.isValid = true;
                    }
                },

                params: {
                    element: tbPara,
                    value: $.trim(tbPara.value),
                    isValid: false,
                    errMsg: "",
                    init: function() {
                        try {
                            if (0 == this.value.length || JSON.parse(this.value))
                                this.isValid = true;
                        } catch (e) { this.errMsg = e.name + ": " + e.description + "\r\nParams: \r\n" + this.value; }
                    }
                },

                setStyle: function(element, isValid) {
                    try {
                        element.style.backgroundColor = isValid ? "" : "#FFF19E";
                        if (!isValid) element.focus();
                    } catch (e) { }
                }
            };

            return data;
        };

        page.tbURL_Changed = function(sender) {
            var data = this.parseData();
            data.url.init(); data.setStyle(data.url.element, data.url.isValid);
            if (!data.url.isValid) { alert(data.url.errMsg); return; }

            var index = data.url.value.lastIndexOf("/");
            if (index < 0 || index == data.url.value.length - 1) return; //no chance, data.url.value.isValid = true;

            var sWSName = data.url.value.substr(index + 1);
            $("#divWSName").html(sWSName);
        };

        page.btnGoToUrl_Click = function() {
            var data = this.parseData();
            data.url.init(); data.setStyle(data.url.element, data.url.isValid);
            if (!data.url.isValid) { alert(data.url.errMsg); return; }

            var index = data.url.value.lastIndexOf("/");
            if (index < 0 || index == data.url.value.length - 1) return; //no chance, data.url.value.isValid = true;
            var url = data.url.value.substr(0, index) + "?op=" + data.url.value.substr(index + 1);
            window.open(url);
        };

        page.tbPara_Changed = function(sender) {
            var data = this.parseData();
            data.params.init(); data.setStyle(data.params.element, data.params.isValid);
            if (!data.params.isValid) alert(data.params.errMsg);
        };

        page.history = {
            get: function() {
                var history = $.cookie("WSTest"); if (!history) return null;
                return JSON.parse(history);
            },
            set: function(items) {
                if (!items || !("push" in items)) items = [];
                $.cookie("WSTest", JSON.stringify(items), { expires: 30 });
            },
            show: function(items) {
                var html = "<ol>";
                if (items && ("length" in items) && items.length > 0) {
                    for (var l = items.length - 1, i = l; i >= 0; i--) {
                        var li = items[i];
                        html += '<li class="pre">';
                        html += 'Url: <span id="spnHisUrl' + i + '">' + li.url + '</span>';
                        html += '<br/>Params: <span id="spnHisPara' + i + '">' + li.params + '</span>';
                        html += '<br/><input type="button" class="button" onclick="page.history.remove(' + i + ');" value="Remove" />';
                        html += '&nbsp;&nbsp;<input type="button" class="button" onclick="page.history.load(' + i + ')" value="Load" />';
                        html += '</li>';
                    }
                }
                html += "</ol>";
                $("#divHistory").html(html);
            },
            load: function(iHis) {
                var spnURL = $("#spnHisUrl" + iHis); if (0 == spnURL.length) return;
                var spnPara = $("#spnHisPara" + iHis); if (0 == spnPara.length) return;
                $("#tbURL").attr("value", spnURL.html() || "");
                $("#tbPara").attr("value", spnPara.html() || "");
            },
            loadPrev: function() {
                var items = this.get();
                if (!items || !("length" in items) || 0 == items.length) return;
                this.show(items);

                var item = items[items.length - 1];
                $("#tbURL").attr("value", item.url);
                $("#tbPara").attr("value", item.params);
            },
            add: function(oCaller) {
                var items = this.get(); if (!items || !("length" in items)) items = [];
                while (items.length >= 15) items.shift(); //Remember max. 15 items.

                items.push({ url: oCaller.url, params: oCaller.params });
                this.set(items);
                return items;
            },
            remove: function(iHis) {
                if (iHis < 0) return;
                var items = this.get(); if (!items || !("length" in items) || iHis > items.length - 1) return;
                items.splice(iHis, 1);
                this.set(items);
                this.show(items);
            }
        };

        page.displayResult = function(oCaller) {
            var html = oCaller.toHtml();
            $("#divResult").html(html);
            page.history.show(items);
            $("#btnInvoke").removeAttr("disabled");
        };

        page.btnClear_Click = function() {
            $("#divResult").html("");
        };

        page.callWSError = function(errorDetail) {
            $("#divResult").html(errorDetail);
            $("#btnInvoke").removeAttr("disabled");
        };

        page.btnInvoke_Click = function(sender) {
            var data = this.parseData();
            data.url.init(); data.setStyle(data.url.element, data.url.isValid);
            if (!data.url.isValid) { alert(data.url.errMsg); return; }

            data.params.init(); data.setStyle(data.params.element, data.params.isValid);
            if (!data.params.isValid) { alert(data.params.errMsg); return; }

            this.oCaller = WS.createNewCaller(data.url.value, data.params.value, null, this.displayResult, this.callWSError);
            var items = this.history.add(this.oCaller);
            this.history.show(items);
            $("#divResult").html("");
            WS.callService(this.oCaller);
            $(sender).attr("disabled", "disabled");
        };
    </script>

</head>
<body style="font-family: Verdana; margin: 0; padding: 0px;" onload="page.history.loadPrev();">
    <div id="divWSName" style="color: white; font-family: Tahoma; font-size: 26px; background-color: #003366;
        margin: 0px; padding: 10px 0 3px 15px;">
        Web Service Test
    </div>
    <div id="divContent" style="padding: 15px;">
        <div id="divURL">
            <span>Enter Web Service url here:</span>
            <br />
            <input type="text" id="tbURL" style="width: 900px;" value="http://localhost:5001/WSPage.asmx?op=MethodName"
                onchange="page.tbURL_Changed(this);" />
            <input type="button" id="btnGoToUrl" value="Go" onclick="page.btnGoToUrl_Click(this);" />
        </div>
        <div id="divPara">
            <span>Enter JSON of params object here, e.g. "{Para1: 2, Para2: Date(1234567890)}, Para3:
                "stringvalue"}"</span>
            <br />
            <textarea id="tbPara" rows="10" cols="100" style="width: 900px; height: 150px;" onchange="page.tbPara_Changed(this);">{"iEID":"1518","iPageSize":"0","iPageIndex":"0"}</textarea>
        </div>
        <fieldset>
            <legend onclick="WS.toggleVisible('divHistory');">History</legend>
            <div id="divHistory" style="padding-left: 20px;" />
        </fieldset>
        <div>
            <input type="button" id="btnInvoke" value="Invoke" onclick="page.btnInvoke_Click(this);" />
            <input type="button" id="btnClear" value="Clear" onclick="page.btnClear_Click(this);" />
        </div>
        <fieldset>
            <legend onclick="WS.toggleVisible('divResult');">Result</legend>
            <div id="divResult" style="padding-left: 20px;" />
        </fieldset>
    </div>
</body>
</html>
